import React, { useEffect, useState, Component, useRef } from 'react';
import { fetchSync, request } from '@/utils/request';
import { history } from 'umi';
import { connect, router } from 'dva';

import enUS from 'antd/es/locale/en_US';
import {
    Menu, Switch, Divider, Checkbox, Button, Row, Col, Tooltip, notification, Skeleton, Statistic,
    Form, Modal, Select, Tree, Icon, Radio, Table, Tag, Pagination, Input, Space, message, Card, Tabs, Collapse, Image, ConfigProvider
} from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined, AudioOutlined, UserOutlined, ArrowRightOutlined, ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';

import * as echarts from 'echarts';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import styles from './profit.less';
import * as turf from '@turf/turf';
import { Marker } from 'mapbox-gl';
import Mymenu from './mymenu';
import { getUserId, getUserName } from '@/utils/loginAssert';
import moment from 'moment';

export default (props) => {
    const [map, setMap] = useState(null);
    const [users, setUsers] = useState([]);
    const mapContainer = useRef(null);
    const echarts1 = useRef(null);
    const echarts2 = useRef(null);
    const echarts3 = useRef(null);
    const echarts4 = useRef(null);
    const echarts5 = useRef(null);
    const echarts6 = useRef(null);
    const echarts7 = useRef(null);
    const [myecharts7, setMyecharts7] = useState(null);
    const echarts8 = useRef(null);
    const commentList = useRef(null);

    const [profit, setProfit] = useState({
        weekly: 0,
        monthly: 0,
        year: 0
    })
    const [myActivities, setMyActivities] = useState([])

    //初始函数
    useEffect(async () => {
        //此处编写 组件挂载之后和组件重新渲染之后执行的代码
        let data = await fetchSync('/api/user/findAll')
        setUsers(data.data);

        // initActivities();
        return () => {
            //此处编写 组件即将被卸载前执行的代码
        }
        // 4、若传值，但是传的是空数组 []，则表示该useEffect里的内容仅会在“挂载完成后和组件即将被卸载前”执行一次；
    }, [])

    const initActivities = () => {
        request('/api/joy/activity/findAll', {
            method: 'get'
        }).then(res => {
            if (res.success) {
                let data = res.data.filter(item => (item.userId == getUserId()) || ((item.userId != getUserId()) && (item.userNames) && (item.userNames.indexOf(getUserName()) != -1)))
                setMyActivities(data || [])

            }
        })
    }

    useEffect(() => {
        if (users.length == 0) return;
        initChart1()

        // Statistic
        let weekUsers = users.filter(u => {
            let vipDueDate = moment(u['vipDueDate'])
            let dueDate = moment().add(1, 'week')
            return vipDueDate - dueDate < 0
        }).reduce((total, obj) => total + obj.cost, 0)

        let monthUsers = users.filter(u => {
            let vipDueDate = moment(u['vipDueDate'])
            let dueDate = moment().add(1, 'month')
            return vipDueDate - dueDate < 0
        }).reduce((total, obj) => total + obj.cost, 0)

        let yearUsers = users.filter(u => {
            let vipDueDate = moment(u['vipDueDate'])
            let dueDate = moment().add(1, 'year')
            return vipDueDate - dueDate < 0
        }).reduce((total, obj) => total + obj.cost, 0)

        setProfit({
            weekly: weekUsers,
            monthly: monthUsers,
            year: yearUsers
        })

    }, [users])

    const initChart1 = () => {
        let xAxisData = users.map(u => u.username)
        let seriesData = users.map(u => u.cost)
        let option = {
            title: {
                left: 0,
                text: `Everyone's cost`,
                textStyle: {
                    //文字颜色
                    // color: '#fff',
                    //字体风格,'normal','italic','oblique'
                    fontStyle: 'normal',
                    //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                    fontWeight: 'bold',
                    fontFamily: 'sans-serif',
                    fontSize: 17
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            toolbox: {
                show: false,
            },
            xAxis: [
                {
                    type: 'category',
                    data: xAxisData
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '',
                    type: 'bar',
                    emphasis: {
                        focus: 'series'
                    },
                    data: seriesData
                },
            ]
        };
        let myChart = echarts.init(echarts1.current);
        option && myChart.setOption(option);
    }

    return (
        <div style={{ padding: '50px 10px' }}>
            <Space direction="vertical" style={{ width: '100%' }}>
                
                <Card style={{ background: '#fff' }} border={false}>
                    <div style={{color:'black', marginBottom: 10, fontWeight:'bold'}}>Future revenue</div>
                    <div style={{ width: '100%', display:'flex', justifyContent:'space-around' }}>
                        <Statistic
                            title="at a weekly"
                            value={profit['weekly']}
                            precision={2}
                            valueStyle={{
                                color: '#3f8600',
                            }}
                            prefix={'$'}
                            suffix=""
                        />
                        <Statistic
                            title="at a monthly"
                            value={profit['monthly']}
                            precision={2}
                            valueStyle={{
                                color: '#3f8600',
                            }}
                            prefix={'$'}
                            suffix=""
                        />
                        <Statistic
                            title="at a year"
                            value={profit['year']}
                            precision={2}
                            valueStyle={{
                                color: '#3f8600',
                            }}
                            prefix={'$'}
                            suffix=""
                        />
                    </div>
                </Card>

                <Card style={{ background: '#fff' }}>
                    <div ref={echarts1} style={{ width: '100%', height: '500px' }}></div>
                </Card>
            </Space>
        </div>
    );
}
